<template>
  <el-dialog id="iconDialog" title="选择菜单图标" :modal="false"  :visible="iconDialogVisible" @close="setClose">
    <div class="myclass">
      <i v-for="icon in iconDropdownMenus" :key="icon.key" :class="icon.key" @click="selectIcon(icon.key)"></i>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "IconDialog",
  data() {
    return {
      iconDropdownMenus: [
        { key: "el-icon-delete-solid" },
        { key: "el-icon-delete" },
        { key: "el-icon-s-tools" },
        { key: "el-icon-setting" },
        { key: "el-icon-user-solid" },
        { key: "el-icon-user" },
        { key: "el-icon-phone" },
        { key: "el-icon-phone-outline" },
        { key: "el-icon-more" },
        { key: "el-icon-more-outline" },
        { key: "el-icon-star-on" },
        { key: "el-icon-star-off" },
        { key: "el-icon-s-goods" },
        { key: "el-icon-goods" },
        { key: "el-icon-warning" },
        { key: "el-icon-warning-outline" },
        { key: "el-icon-question" },
        { key: "el-icon-info" },
        { key: "el-icon-remove" },
        { key: "el-icon-circle-plus" },
        { key: "el-icon-success" },
        { key: "el-icon-error" },
        { key: "el-icon-zoom-in" },
        { key: "el-icon-zoom-out" },
        { key: "el-icon-remove-outline" },
        { key: "el-icon-circle-plus-outline" },
        { key: "el-icon-circle-check" },
        { key: "el-icon-circle-close" },
        { key: "el-icon-s-help" },
        { key: "el-icon-help" },
        { key: "el-icon-minus" },
        { key: "el-icon-plus" },
        { key: "el-icon-check" },
        { key: "el-icon-close" },
        { key: "el-icon-picture" },
        { key: "el-icon-picture-outline" },
        { key: "el-icon-picture-outline-round" },
        { key: "el-icon-upload" },
        { key: "el-icon-upload2" },
        { key: "el-icon-download" },
        { key: "el-icon-camera-solid" },
        { key: "el-icon-camera" },
        { key: "el-icon-video-camera-solid" },
        { key: "el-icon-video-camera" },
        { key: "el-icon-message-solid" },
        { key: "el-icon-bell" },
        { key: "el-icon-s-cooperation" },
        { key: "el-icon-s-order" },
        { key: "el-icon-s-platform" },
        { key: "el-icon-s-fold" },
        { key: "el-icon-s-unfold" },
        { key: "el-icon-s-operation" },
        { key: "el-icon-s-promotion" },
        { key: "el-icon-s-home" },
        { key: "el-icon-s-release" },
        { key: "el-icon-s-ticket" },
        { key: "el-icon-s-management" },
        { key: "el-icon-s-open" },
        { key: "el-icon-s-shop" },
        { key: "el-icon-s-marketing" },
        { key: "el-icon-s-flag" },
        { key: "el-icon-s-comment" },
        { key: "el-icon-s-finance" },
        { key: "el-icon-s-claim" },
        { key: "el-icon-s-custom" },
        { key: "el-icon-s-opportunity" },
        { key: "el-icon-s-data" },
        { key: "el-icon-s-check" },
        { key: "el-icon-s-grid" },
        { key: "el-icon-menu" },
        { key: "el-icon-share" },
        { key: "el-icon-d-caret" },
        { key: "el-icon-caret-left" },
        { key: "el-icon-caret-right" },
        { key: "el-icon-caret-bottom" },
        { key: "el-icon-caret-top" },
        { key: "el-icon-bottom-left" },
        { key: "el-icon-bottom-right" },
        { key: "el-icon-back" },
        { key: "el-icon-right" },
        { key: "el-icon-bottom" },
        { key: "el-icon-top" },
        { key: "el-icon-top-left" },
        { key: "el-icon-top-right" },
        { key: "el-icon-arrow-left" },
        { key: "el-icon-arrow-right" },
        { key: "el-icon-arrow-down" },
        { key: "el-icon-arrow-up" },
        { key: "el-icon-d-arrow-left" },
        { key: "el-icon-d-arrow-right" },
        { key: "el-icon-video-pause" },
        { key: "el-icon-video-play" },
        { key: "el-icon-refresh" },
        { key: "el-icon-refresh-right" },
        { key: "el-icon-refresh-left" },
        { key: "el-icon-finished" },
        { key: "el-icon-sort" },
        { key: "el-icon-sort-up" },
        { key: "el-icon-sort-down" },
        { key: "el-icon-rank" },
        { key: "el-icon-loading" },
        { key: "el-icon-view" },
        { key: "el-icon-c-scale-to-original" },
        { key: "el-icon-date" },
        { key: "el-icon-edit" },
        { key: "el-icon-edit-outline" },
        { key: "el-icon-folder" },
        { key: "el-icon-folder-opened" },
        { key: "el-icon-folder-add" },
        { key: "el-icon-folder-remove" },
        { key: "el-icon-folder-delete" },
        { key: "el-icon-folder-checked" },
        { key: "el-icon-tickets" },
        { key: "el-icon-document-remove" },
        { key: "el-icon-document-delete" },
        { key: "el-icon-document-copy" },
        { key: "el-icon-document-checked" },
        { key: "el-icon-document" },
        { key: "el-icon-document-add" },
        { key: "el-icon-printer" },
        { key: "el-icon-paperclip" },
        { key: "el-icon-takeaway-box" },
        { key: "el-icon-search" },
        { key: "el-icon-monitor" },
        { key: "el-icon-attract" },
        { key: "el-icon-mobile" },
        { key: "el-icon-scissors" },
        { key: "el-icon-umbrella" },
        { key: "el-icon-headset" },
        { key: "el-icon-brush" },
        { key: "el-icon-mouse" },
        { key: "el-icon-coordinate" },
        { key: "el-icon-magic-stick" },
        { key: "el-icon-reading" },
        { key: "el-icon-data-line" },
        { key: "el-icon-data-board" },
        { key: "el-icon-pie-chart" },
        { key: "el-icon-data-analysis" },
        { key: "el-icon-collection-tag" },
        { key: "el-icon-film" },
        { key: "el-icon-suitcase" },
        { key: "el-icon-suitcase-1" },
        { key: "el-icon-receiving" },
        { key: "el-icon-collection" },
        { key: "el-icon-files" },
        { key: "el-icon-notebook-1" },
        { key: "el-icon-notebook-2" },
        { key: "el-icon-toilet-paper" },
        { key: "el-icon-office-building" },
        { key: "el-icon-school" },
        { key: "el-icon-table-lamp" },
        { key: "el-icon-house" },
        { key: "el-icon-no-smoking" },
        { key: "el-icon-smoking" },
        { key: "el-icon-shopping-cart-full" },
        { key: "el-icon-shopping-cart-1" },
        { key: "el-icon-shopping-cart-2" },
        { key: "el-icon-shopping-bag-1" },
        { key: "el-icon-shopping-bag-2" },
        { key: "el-icon-sold-out" },
        { key: "el-icon-sell" },
        { key: "el-icon-present" },
        { key: "el-icon-box" },
        { key: "el-icon-bank-card" },
        { key: "el-icon-money" },
        { key: "el-icon-coin" },
        { key: "el-icon-wallet" },
        { key: "el-icon-discount" },
        { key: "el-icon-price-tag" },
        { key: "el-icon-news" },
        { key: "el-icon-guide" },
        { key: "el-icon-male" },
        { key: "el-icon-female" },
        { key: "el-icon-thumb" },
        { "key": "el-icon-cpu" },
        { "key": "el-icon-link" },
        { "key": "el-icon-connection" },
        { "key": "el-icon-open" },
        { "key": "el-icon-turn-off" },
        { "key": "el-icon-set-up" },
        { "key": "el-icon-chat-round" },
        { "key": "el-icon-chat-line-round" },
        { "key": "el-icon-chat-square" },
        { "key": "el-icon-chat-dot-round" },
        { "key": "el-icon-chat-dot-square" },
        { "key": "el-icon-chat-line-square" },
        { "key": "el-icon-message" },
        { "key": "el-icon-postcard" },
        { "key": "el-icon-position" },
        { "key": "el-icon-turn-off-microphone" },
        { "key": "el-icon-microphone" },
        { "key": "el-icon-close-notification" },
        { "key": "el-icon-bangzhu" },
        { "key": "el-icon-time" },
        { "key": "el-icon-odometer" },
        { "key": "el-icon-crop" },
        { "key": "el-icon-aim" },
        { "key": "el-icon-switch-button" },
        { "key": "el-icon-full-screen" },
        { "key": "el-icon-copy-document" },
        { "key": "el-icon-mic" },
        { "key": "el-icon-stopwatch" },
        { "key": "el-icon-medal-1" },
        { "key": "el-icon-medal" },
        { "key": "el-icon-trophy" },
        { "key": "el-icon-trophy-1" },
        { "key": "el-icon-first-aid-kit" },
        { "key": "el-icon-discover" },
        { "key": "el-icon-place" },
        { "key": "el-icon-location" },
        { "key": "el-icon-location-outline" },
        { "key": "el-icon-location-information" },
        { "key": "el-icon-add-location" },
        { "key": "el-icon-delete-location" },
        { "key": "el-icon-map-location" },
        { "key": "el-icon-alarm-clock" },
        { "key": "el-icon-timer" },
        { "key": "el-icon-watch-1" },
        { "key": "el-icon-watch" },
        { "key": "el-icon-lock" },
        { "key": "el-icon-unlock" },
        { "key": "el-icon-key" },
        { "key": "el-icon-service" },
        { "key": "el-icon-mobile-phone" },
        { "key": "el-icon-bicycle" },
        { "key": "el-icon-truck" },
        { "key": "el-icon-ship" },
        { "key": "el-icon-basketball" },
        { "key": "el-icon-football" },
        { "key": "el-icon-soccer" },
        { "key": "el-icon-baseball" },
        { "key": "el-icon-wind-power" },
        { "key": "el-icon-light-rain" },
        { "key": "el-icon-lightning" },
        { "key": "el-icon-heavy-rain" },
        { "key": "el-icon-sunrise" },
        { "key": "el-icon-sunrise-1" },
        { "key": "el-icon-sunset" },
        { "key": "el-icon-sunny" },
        { "key": "el-icon-cloudy" },
        { "key": "el-icon-partly-cloudy" },
        { "key": "el-icon-cloudy-and-sunny" },
        { "key": "el-icon-moon" },
        { "key": "el-icon-moon-night" },
        { "key": "el-icon-dish" },
        { "key": "el-icon-dish-1" },
        { "key": "el-icon-food" },
        { "key": "el-icon-chicken" },
        { "key": "el-icon-fork-spoon" },
        { "key": "el-icon-knife-fork" },
        { "key": "el-icon-burger" },
        { "key": "el-icon-tableware" },
        { "key": "el-icon-sugar" },
        { "key": "el-icon-dessert" },
        { "key": "el-icon-ice-cream" },
        { "key": "el-icon-hot-water" },
        { "key": "el-icon-water-cup" },
        { "key": "el-icon-coffee-cup" },
        { "key": "el-icon-cold-drink" },
        { "key": "el-icon-goblet" },
        { "key": "el-icon-goblet-full" },
        { "key": "el-icon-goblet-square" },
        { "key": "el-icon-goblet-square-full" },
        { "key": "el-icon-refrigerator" },
        { "key": "el-icon-grape" },
        { "key": "el-icon-watermelon" },
        { "key": "el-icon-cherry" },
        { "key": "el-icon-apple" },
        { "key": "el-icon-pear" },
        { "key": "el-icon-orange" },
        { "key": "el-icon-coffee" },
        { "key": "el-icon-ice-tea" },
        { "key": "el-icon-ice-drink" },
        { "key": "el-icon-milk-tea" },
        { "key": "el-icon-potato-strips" },
        { "key": "el-icon-lollipop" },
        { "key": "el-icon-ice-cream-square" },
        { "key": "el-icon-ice-cream-round" }
      ]
    }
  },
  computed: {
    iconDialogVisible: {
      get() {
        return this.$store.state.menu.iconDialogVisible;
      },
      set(value) {
        this.$store.state.menu.iconDialogVisible = value;
      }
    },
    menuForm: {
      get() {
        return this.$store.state.menu.menuForm;
      },
      set(value) {
        this.$store.state.menu.menuForm = value;
      }
    }
  },
  methods: {
    setClose() {
      this.iconDialogVisible = false;
    },
    selectIcon(icon) {
      this.menuForm.menuIcon = icon;
      this.iconDialogVisible = false;
    },
  }
}
</script>

<style scoped>
#iconDialog i {
  font-size: 30px;
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5PX;
  border: 1px solid beige;
  transition: all 0.2s ease;
}
#iconDialog i:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.myclass {
  height: 400px !important;
  overflow-y: auto;
}
</style>
